<template>
  <div
    :class="['component-wrapper', { 'selected': isSelected }]"
    @click.stop="$emit('select')"
  >
    <!-- 校区名称组件 -->
    <div v-if="component.type === 'campus'" class="campus-component" :style="getComponentStyle()">
      <i class="el-icon-office-building component-icon"></i>
      <span class="component-text">{{ getCampusName() }}</span>
    </div>
    
    <!-- 搜索框组件 -->
    <div v-else-if="component.type === 'search'" class="search-component" :style="getComponentStyle()">
      <i class="el-icon-search component-icon"></i>
      <input 
        type="text" 
        :placeholder="component.data.placeholder || '搜索框'" 
        class="search-input"
        readonly
      />
    </div>
    
    <!-- 轮播图组件 -->
    <div v-else-if="component.type === 'banner'" class="banner-component" :style="getComponentStyle()">
      <div v-if="!getBannerData() || getBannerData().length === 0" class="banner-placeholder">
        <i class="el-icon-picture banner-icon"></i>
        <div class="banner-text">
          <span>轮播图</span>
          <small>点击配置添加图片</small>
        </div>
      </div>
      <div v-else class="banner-content">
        <div class="banner-real-preview">
          <image-preview 
            :src="getBannerData()[0].image || getBannerData()[0].imageUrl" 
            :width="280" 
            :height="100"
          />
        </div>
        <div class="banner-indicators">
          <span 
            v-for="(banner, index) in getBannerData()" 
            :key="index"
            class="indicator"
            :class="{ active: index === 0 }"
          ></span>
        </div>
      </div>
    </div>
    
    <!-- 商品展示组件 -->
    <div v-else-if="component.type === 'goods'" class="goods-component" :style="getComponentStyle()">
      <div class="goods-header">
        <i class="el-icon-goods component-icon"></i>
        <span>商品展示</span>
      </div>
      <div class="goods-grid" v-if="component.data.layout === 'grid'">
        <div 
          class="goods-item" 
          v-for="(goods, index) in getGoodsData().slice(0, component.data.columns || 2)" 
          :key="goods.id || index"
        >
          <div class="goods-image">
            <image-preview :src="goods.image" :width="60" :height="45"/>
          </div>
          <div class="goods-info">
            <span>{{ goods.name || '商品名称' }}</span>
            <span class="price">¥{{ goods.price || '99' }}</span>
          </div>
        </div>
        <!-- 如果没有商品数据，显示占位符 -->
        <div 
          v-if="getGoodsData().length === 0"
          class="goods-item" 
          v-for="i in Math.min(component.data.columns || 2, 4)" 
          :key="'placeholder-' + i"
        >
          <div class="goods-image goods-placeholder"></div>
          <div class="goods-info">
            <span>商品名称</span>
            <span class="price">¥99</span>
          </div>
        </div>
      </div>
      <div class="goods-list" v-else>
        <div 
          v-if="getGoodsData().length > 0"
          class="goods-item-list"
        >
          <div class="goods-image">
            <image-preview :src="getGoodsData()[0].image" :width="60" :height="45"/>
          </div>
          <div class="goods-info">
            <span>{{ getGoodsData()[0].name || '商品名称' }}</span>
            <span class="price">¥{{ getGoodsData()[0].price || '99' }}</span>
          </div>
        </div>
        <div v-else class="goods-item-list">
          <div class="goods-image goods-placeholder"></div>
          <div class="goods-info">
            <span>商品名称</span>
            <span class="price">¥99</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 快捷入口组件 -->
    <div v-else-if="component.type === 'quick'" class="quick-component" :style="getComponentStyle()">
      <div class="quick-header">
        <i class="el-icon-menu component-icon"></i>
        <span>快捷入口</span>
      </div>
      <div :class="['quick-entries', `quick-${component.data.layout || 'horizontal'}`]">
        <div 
          class="quick-item" 
          v-for="(quick, index) in getQuickData().slice(0, 4)" 
          :key="quick.id || index"
        >
          <i class="el-icon-star-off"></i>
          <span>{{ quick.name || '入口' + (index + 1) }}</span>
        </div>
        <!-- 如果没有快捷入口数据，显示占位符 -->
        <div 
          v-if="getQuickData().length === 0"
          class="quick-item" 
          v-for="i in 4" 
          :key="'placeholder-' + i"
        >
          <i class="el-icon-star-off"></i>
          <span>入口{{ i }}</span>
        </div>
      </div>
    </div>
    
    <!-- 功能入口组件 -->
    <div v-else-if="component.type === 'entries'" class="entries-component" :style="getComponentStyle()">
      <div class="entries-header">
        <i class="el-icon-grid component-icon"></i>
        <span>功能入口</span>
      </div>
      <div class="entries-grid" :style="{ gridTemplateColumns: `repeat(${component.data.columns || 4}, 1fr)` }">
        <div 
          class="entry-item" 
          v-for="(entry, index) in getEntriesData().slice(0, component.data.columns || 4)" 
          :key="entry.id || index"
        >
          <div class="entry-icon">
            <image-preview 
              v-if="entry.builtInIcon || entry.customIcon"
              :src="entry.builtInIcon || entry.customIcon" 
              :width="24" 
              :height="24"
            />
            <i v-else class="el-icon-service"></i>
          </div>
          <span>{{ entry.name || '功能' + (index + 1) }}</span>
        </div>
        <!-- 如果没有功能入口数据，显示占位符 -->
        <div 
          v-if="getEntriesData().length === 0"
          class="entry-item" 
          v-for="i in (component.data.columns || 4)" 
          :key="'placeholder-' + i"
        >
          <div class="entry-icon">
            <i class="el-icon-service"></i>
          </div>
          <span>功能{{ i }}</span>
        </div>
      </div>
    </div>
    
    <!-- 校区公告组件 -->
    <div v-else-if="component.type === 'notice'" class="notice-component" :style="getComponentStyle()">
      <div v-if="getCampusAdsData().length === 0" class="notice-placeholder">
        <i class="el-icon-bell component-icon"></i>
        <span>请选择要显示的校区公告</span>
      </div>
      <div v-else class="campus-ads-list">
        <div 
          v-for="(campus, index) in getCampusAdsData().slice(0, component.data.maxCount || 3)" 
          :key="campus.id"
          class="campus-ad-item"
          :class="getNoticeClass(component.data.type || campus.type)"
        >
          <div class="notice-header">
            <i class="el-icon-bell component-icon"></i>
            <span class="notice-title">{{ campus.title }}</span>
            <span v-if="component.data.showTime" class="notice-time">{{ formatTime(campus.publishTime) }}</span>
          </div>
          <div class="notice-content" v-if="campus.content">
            {{ campus.content }}
          </div>
          <div class="notice-tag" v-if="campus.tag">
            {{ campus.tag }}
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分销商品组件 -->
    <div v-else-if="component.type === 'distribution-goods'" class="distribution-goods-component" :style="getComponentStyle()">
      <div class="distribution-goods-header">
        <i class="el-icon-share component-icon"></i>
        <span>分销商品</span>
      </div>
      <div class="distribution-goods-grid" v-if="component.data.layout === 'grid'">
        <div 
          class="distribution-goods-item" 
          v-for="(goods, index) in getDistributionGoodsData().slice(0, component.data.columns || 2)" 
          :key="goods.goodId || index"
        >
          <div class="distribution-goods-image">
            <image-preview :src="goods.goodPicture || goods.image" :width="60" :height="45"/>
          </div>
                     <div class="distribution-goods-info">
             <span class="goods-name">{{ goods.goodName || '商品名称' }}</span>
             <span class="goods-price">¥{{ goods.goodPrice || '99' }}</span>
           </div>
        </div>
        <!-- 如果没有分销商品数据，显示占位符 -->
        <div 
          v-if="getDistributionGoodsData().length === 0"
          class="distribution-goods-item" 
          v-for="i in Math.min(component.data.columns || 2, 4)" 
          :key="'placeholder-' + i"
        >
          <div class="distribution-goods-image distribution-goods-placeholder"></div>
          <div class="distribution-goods-info">
            <span class="goods-name">分销商品</span>
            <span class="goods-price">¥99</span>
          </div>
        </div>
      </div>
      <div class="distribution-goods-list" v-else>
        <div 
          v-if="getDistributionGoodsData().length > 0"
          class="distribution-goods-item-list"
        >
          <div class="distribution-goods-image">
            <image-preview :src="getDistributionGoodsData()[0].goodPicture || getDistributionGoodsData()[0].image" :width="60" :height="45"/>
          </div>
          <div class="distribution-goods-info">
            <span class="goods-name">{{ getDistributionGoodsData()[0].goodName || '分销商品' }}</span>
            <span class="goods-price">¥{{ getDistributionGoodsData()[0].goodPrice || '99' }}</span>
          </div>
        </div>
        <div v-else class="distribution-goods-item-list">
          <div class="distribution-goods-image distribution-goods-placeholder"></div>
          <div class="distribution-goods-info">
            <span class="goods-name">分销商品</span>
            <span class="goods-price">¥99</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 品牌推荐组件 -->
    <div v-else-if="component.type === 'recommend'" class="recommend-component" :style="getComponentStyle()">
      <div class="recommend-header">
        <i class="el-icon-star-on component-icon"></i>
        <span>品牌推荐</span>
      </div>
      <div :class="['recommend-content', `recommend-${component.data.layout || 'horizontal'}`]">
        <div 
          class="brand-item" 
          v-for="(brand, index) in getRecommendData().slice(0, 3)" 
          :key="brand.id || index"
        >
          <div class="brand-logo" v-if="component.data.showLogo">
            <image-preview 
              v-if="brand.logo"
              :src="brand.logo" 
              :width="30" 
              :height="30"
            />
            <i v-else class="el-icon-picture"></i>
          </div>
          <span class="brand-name">{{ brand.name || '品牌' + (index + 1) }}</span>
        </div>
        <!-- 如果没有品牌推荐数据，显示占位符 -->
        <div 
          v-if="getRecommendData().length === 0"
          class="brand-item" 
          v-for="i in 3" 
          :key="'placeholder-' + i"
        >
          <div class="brand-logo" v-if="component.data.showLogo">
            <i class="el-icon-picture"></i>
          </div>
          <span class="brand-name">品牌{{ i }}</span>
        </div>
      </div>
    </div>
    
    <!-- 文本组件 -->
    <div v-else-if="component.type === 'text'" class="text-component" :style="getComponentStyle()">
      <i class="el-icon-edit-outline component-icon"></i>
      <span class="component-text">{{ component.data.content || '请输入文本内容' }}</span>
    </div>
    
    <!-- 删除按钮 -->
    <el-button
      v-if="isSelected"
      size="mini"
      type="danger"
      class="delete-btn"
      @click.stop="$emit('delete')"
      icon="el-icon-delete"
    />
    
    <!-- 组件类型标签 -->
    <div v-if="isSelected" class="component-tag">
      {{ getComponentName() }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComponentWrapper',
  props: {
    component: {
      type: Object,
      required: true
    },
    isSelected: {
      type: Boolean,
      default: false
    },
    // 接收来自父组件的真实数据
    selectedBanners: {
      type: Array,
      default: () => []
    },
    selectedEntries: {
      type: Array,
      default: () => []
    },
    selectedGoods: {
      type: Array,
      default: () => []
    },
    selectedRecommends: {
      type: Array,
      default: () => []
    },
    selectedQuicks: {
      type: Array,
      default: () => []
    },
    selectedCampusAds: {
      type: Array,
      default: () => []
    },
    selectedDistributionGoods: {
      type: Array,
      default: () => []
    },
    campusList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getComponentStyle() {
      const style = this.component.style || {}
      return {
        backgroundColor: style.backgroundColor || 'transparent',
        color: style.color || '#333',
        fontSize: (style.fontSize || 14) + 'px',
        borderRadius: (style.borderRadius || 4) + 'px',
        padding: (style.padding || 12) + 'px',
        margin: (style.margin || 10) + 'px',
        textAlign: style.textAlign || 'left'
      }
    },
    
    getComponentName() {
      const names = {
        campus: '校区名称',
        search: '搜索框',
        banner: '轮播图',
        goods: '商品展示',
        'distribution-goods': '分销商品',
        quick: '快捷入口',
        entries: '功能入口',
        notice: '校区公告',
        recommend: '品牌推荐',
        text: '文本'
      }
      return names[this.component.type] || '未知组件'
    },
    
    getCampusName() {
      if (!this.component.data.campusId) return '请选择校区'
      const campus = this.campusList.find(c => c.campusId === this.component.data.campusId)
      return campus ? campus.campusName : '校区名称'
    },

    // 获取轮播图数据
    getBannerData() {
      if (!this.component.data.banners || this.component.data.banners.length === 0) {
        return []
      }
      // 根据组件中保存的ID从selectedBanners中获取完整数据
      return this.selectedBanners.filter(banner => 
        this.component.data.banners.includes(banner.id)
      )
    },

    // 获取功能入口数据
    getEntriesData() {
      console.log('getEntriesData called')
      console.log('component.data.entries:', this.component.data.entries)
      console.log('selectedEntries:', this.selectedEntries)
      
      if (!this.component.data.entries || this.component.data.entries.length === 0) {
        console.log('没有选择功能入口')
        return []
      }
      const result = this.selectedEntries.filter(entry => 
        this.component.data.entries.includes(entry.id)
      )
      console.log('过滤后的功能入口数据:', result)
      return result
    },

    // 获取商品数据
    getGoodsData() {
      console.log('getGoodsData called')
      console.log('component.data.goodsIds:', this.component.data.goodsIds)
      console.log('selectedGoods:', this.selectedGoods)
      
      if (!this.component.data.goodsIds || this.component.data.goodsIds.length === 0) {
        console.log('没有选择商品')
        return []
      }
      const result = this.selectedGoods.filter(goods => 
        this.component.data.goodsIds.includes(goods.id)
      )
      console.log('过滤后的商品数据:', result)
      return result
    },

    // 获取品牌推荐数据
    getRecommendData() {
      console.log('getRecommendData called')
      console.log('component.data.brands:', this.component.data.brands)
      console.log('selectedRecommends:', this.selectedRecommends)
      
      if (!this.component.data.brands || this.component.data.brands.length === 0) {
        console.log('没有选择品牌推荐')
        return []
      }
      const result = this.selectedRecommends.filter(brand => 
        this.component.data.brands.includes(brand.id)
      )
      console.log('过滤后的品牌推荐数据:', result)
      return result
    },

    // 获取快捷入口数据
    getQuickData() {
      if (!this.component.data.entries || this.component.data.entries.length === 0) {
        return []
      }
      return this.selectedQuicks.filter(quick => 
        this.component.data.entries.includes(quick.id)
      )
    },

    // 获取校区广告数据
    getCampusAdsData() {
      if (!this.component.data.campusAds || this.component.data.campusAds.length === 0) {
        return []
      }
      return this.selectedCampusAds.filter(campus => 
        this.component.data.campusAds.includes(campus.id)
      )
    },

    // 获取分销商品数据
    getDistributionGoodsData() {
      console.log('getDistributionGoodsData called')
      console.log('component.data.goodsIds:', this.component.data.goodsIds)
      console.log('selectedDistributionGoods:', this.selectedDistributionGoods)
      
      if (!this.component.data.goodsIds || this.component.data.goodsIds.length === 0) {
        console.log('没有选择分销商品')
        return []
      }
      const result = this.selectedDistributionGoods.filter(goods => 
        this.component.data.goodsIds.includes(goods.goodId)
      )
      console.log('过滤后的分销商品数据:', result)
      return result
    },

    // 根据校区ID获取校区名称
    getCampusNameById(campusId) {
      if (!campusId) return '未知校区'
      const campus = this.campusList.find(c => c.campusId === campusId)
      return campus ? campus.campusName : '校区' + campusId
    },

    // 获取通知类
    getNoticeClass(type) {
      const classes = {
        'important': 'important-notice',
        'normal': 'normal-notice',
        'emergency': 'emergency-notice'
      }
      return classes[type] || 'normal-notice'
    },

    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return '刚刚'
      try {
        const date = new Date(timestamp)
        return date.toLocaleString('zh-CN', {
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      } catch (error) {
        console.warn('时间格式化失败:', timestamp, error)
        return '刚刚'
      }
    }
  }
}
</script>

<style scoped>
.component-wrapper {
  position: relative;
  border: 2px solid transparent;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  min-height: 40px;
}

.component-wrapper:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.component-wrapper.selected {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 10;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
}

.component-tag {
  position: absolute;
  top: -8px;
  left: 8px;
  background: #409eff;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  z-index: 5;
}

/* 组件具体样式 */
.campus-component,
.search-component,
.text-component {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
}

.component-icon {
  margin-right: 8px;
  color: #666;
  font-size: 16px;
}

.component-text {
  flex: 1;
  word-break: break-all;
}

/* 搜索框样式 */
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: inherit;
  color: inherit;
}

/* 轮播图样式 */
.banner-component {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e3f2fd, #f5f5f5);
  border: 1px dashed #ccc;
}

.banner-placeholder {
  text-align: center;
  color: #999;
}

.banner-content {
  text-align: center;
  color: #333;
  width: 100%;
}

.banner-real-preview {
  margin-bottom: 12px;
}

.banner-icon {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
  color: #409eff;
}

.banner-text span {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 500;
}

.banner-text small {
  font-size: 12px;
  color: #bbb;
}

.banner-indicators {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  transition: background-color 0.3s ease;
}

.indicator.active {
  background: #409eff;
}

/* 商品展示样式 */
.goods-component {
  min-height: 120px;
}

.goods-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: bold;
}

.goods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
}

.goods-item {
  text-align: center;
}

.goods-image {
  width: 100%;
  height: 60px;
  background: #f0f0f0;
  border-radius: 4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goods-placeholder {
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goods-placeholder::before {
  content: '📦';
  font-size: 24px;
  opacity: 0.5;
}

/* 让image-preview组件适应容器 */
.goods-image >>> .el-image {
  width: 100%;
  height: 100%;
}

.goods-image >>> .el-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.goods-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.goods-info span {
  font-size: 12px;
  color: #333;
}

.price {
  color: #ff4757 !important;
  font-weight: bold;
}

.goods-list .goods-item-list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.goods-list .goods-image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.goods-list .goods-info {
  flex: 1;
}

/* 分销商品样式 */
.distribution-goods-component {
  min-height: 120px;
}

.distribution-goods-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: bold;
}

.distribution-goods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}

.distribution-goods-item {
  text-align: center;
}

.distribution-goods-image {
  width: 100%;
  height: 60px;
  background: #f0f0f0;
  border-radius: 4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.distribution-goods-placeholder {
  background: linear-gradient(135deg, #e3f2fd, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #409eff;
}

.distribution-goods-placeholder::before {
  content: '🔗';
  font-size: 24px;
  opacity: 0.5;
}

/* 让image-preview组件适应容器 */
.distribution-goods-image >>> .el-image {
  width: 100%;
  height: 100%;
}

.distribution-goods-image >>> .el-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.distribution-goods-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.distribution-goods-info .goods-name {
  font-size: 12px;
  color: #333;
  font-weight: 500;
}

.distribution-goods-info .goods-price {
  color: #ff4757 !important;
  font-weight: bold;
  font-size: 12px;
}



.distribution-goods-list .distribution-goods-item-list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.distribution-goods-list .distribution-goods-image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.distribution-goods-list .distribution-goods-info {
  flex: 1;
}

/* 快捷入口样式 */
.quick-component {
  min-height: 100px;
}

.quick-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: bold;
}

.quick-entries {
  display: flex;
  gap: 8px;
}

.quick-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.quick-vertical {
  flex-direction: column;
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
  flex: 1;
  min-width: 60px;
  text-align: center;
}

.quick-item i {
  font-size: 20px;
  margin-bottom: 4px;
  color: #666;
}

.quick-item span {
  font-size: 12px;
  color: #666;
}

/* 功能入口样式 */
.entries-component {
  min-height: 100px;
}

.entries-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: bold;
}

.entries-grid {
  display: grid;
  gap: 8px;
}

.entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
  text-align: center;
}

.entry-icon {
  margin-bottom: 4px;
  font-size: 18px;
  color: #409eff;
}

.entry-item span {
  font-size: 12px;
  color: #666;
}

/* 校区公告样式 */
.notice-component {
  min-height: 80px;
}

.notice-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  color: #999;
  border: 1px dashed #ddd;
  border-radius: 4px;
  background: #fafafa;
}

.notice-placeholder i {
  margin-right: 8px;
  font-size: 16px;
}

.campus-ads-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.campus-ad-item {
  background: #fff;
  border-radius: 6px;
  padding: 12px;
  border-left: 4px solid #ffc107;
  transition: all 0.2s ease;
}

.campus-ad-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.important-notice {
  border-left-color: #ff4757;
  background: #fff5f5;
}

.normal-notice {
  border-left-color: #3742fa;
  background: #f8f9ff;
}

.emergency-notice {
  border-left-color: #ff3838;
  background: #ffe8e8;
  animation: urgentBlink 2s infinite;
}

@keyframes urgentBlink {
  0%, 50% { opacity: 1; }
  25%, 75% { opacity: 0.8; }
}

.notice-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-weight: bold;
}

.notice-title {
  flex: 1;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.notice-time {
  font-size: 12px;
  color: #999;
  margin-left: auto;
}

.notice-content {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notice-tag {
  font-size: 11px;
  color: #409eff;
  background: #ecf5ff;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  font-weight: 500;
}

/* 品牌推荐样式 */
.recommend-component {
  min-height: 80px;
}

.recommend-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: bold;
}

.recommend-content {
  display: flex;
  gap: 12px;
}

.recommend-horizontal {
  flex-direction: row;
  overflow-x: auto;
}

.recommend-grid {
  flex-wrap: wrap;
}

.brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 60px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
}

.brand-logo {
  width: 30px;
  height: 30px;
  background: #e9ecef;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  font-size: 14px;
  color: #6c757d;
}

.brand-name {
  font-size: 12px;
  color: #333;
  font-weight: 500;
}
</style> 